<template>
	<div id="app">
		<table class="tb">
			<tr>
				<th>编号</th>
				<th>品牌名称</th>
				<th>创立时间</th>
				<th>操作</th>
			</tr>
			<!-- 循环渲染的元素tr -->
			<tr v-for="(item, index) in list" :key="index">
				<td>{{ item.id }}</td>
				<td>{{ item.name }}</td>
				<td>{{ item.time }}</td>
				<td>
					<button @click="list.splice(index, 1)">删除</button>
				</td>
			</tr>
			<!-- 条件显示：数组中没有数据 -->
			<tr v-show="list.length < 1">
				<td colspan="4">没有数据咯~</td>
			</tr>
		</table>
	</div>
</template>

<script setup>
import { reactive } from 'vue'
const list = reactive([
    { id: 1, name: "奔驰", time: "2020-08-01" },
    { id: 2, name: "宝马", time: "2020-08-02" },
    { id: 3, name: "奥迪", time: "2020-08-03" }
])
</script>

<style scoped>
	#app {
		width: 600px;
		margin: 10px auto;
	}

	.tb {
		border-collapse: collapse;
		width: 100%;
	}

	.tb th {
		background-color: #0094ff;
		color: white;
	}

	.tb td,
	.tb th {
		padding: 5px;
		border: 1px solid black;
		text-align: center;
	}

	.add {
		padding: 5px;
		border: 1px solid black;
		margin-bottom: 10px;
	}
</style>